<template>
	<div class="container">
        <TridentNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>修改昵称</template>
            <template #right><i class="icon iconfont icon-wode" @click="$router.push({path: '/me'})"></i></template>
        </TridentNavBar>

		<van-form @submit="handleSave">
            <van-field
                v-model="formData.nick"
                name="昵称"
                placeholder="请输入昵称"
                :rules="[{ required: true, message: '请输入昵称' }]"
            />

            <!-- 保存按钮 -->
            <div style="margin: 16px">
                <van-button
                    type="primary"
                    native-type="submit"
                    round
                    block
                    color="#27BA9B"
                >
                    保&nbsp;&nbsp;存
                </van-button>
            </div>
		</van-form>
	</div>
</template>

<script setup lang="ts">
import { reactive } from "vue"
import { showSuccessToast } from 'vant'
import { useUserStore } from '@/store/modules/user'
import type { EditUserParams } from "@/types/user";

// 用户存储
const userStore = useUserStore()

const formData = reactive<EditUserParams>({
	nick: userStore.profile.user.nick
})

// 保存数据
const handleSave = async () => {
    await userStore.modifyNick(formData)
    showSuccessToast('修改成功')
}
</script>

<style scoped lang="scss">
.container {
    height: 100vh;
    background-color: ghostwhite;
	margin-top: 45px;
	padding: 5px;
	font-size: 14px;
	line-height: 24px;
	button {
		background: #27BA9B;
	}
}
</style>
